<template>
	<view class="container">
		<view class="content">
			<owner-info :item="carInfo"></owner-info>
			<view class="order-info">
				<text class="txt1">订单信息</text>
				<view class="txt2">
					<text class="txt2-1">销售</text>
					<text class="txt2-2">{{orderInfo.employeeName}}</text>
				</view>
				<view class="txt2">
					<text class="txt2-1">订单编号</text>
					<text class="txt2-2">{{orderInfo.saleId}}</text>
				</view>
				<view class="txt2">
					<text class="txt2-1">下单时间</text>
					<text class="txt2-2">{{orderInfo.createTime}}</text>
				</view>
				<view class="txt2">
					<text class="txt2-1">安排订单</text>
					<text class="txt2-2">
						{{orderInfo.orderSettlement?orderInfo.orderSettlement.settlementItemList[0].createTime:"加载中"}}
					</text>
				</view>
				<view class="txt2">
					<text class="txt2-1">安排师傅</text>
					<text class="txt2-2">{{orderInfo.setEmployeeTime}}</text>
				</view>
				<view class="txt2">
					<text class="txt2-1">施工开始</text>
					<text class="txt2-2">{{orderInfo.constructionTime}}</text>
				</view>
				<view class="txt2">
					<text class="txt2-1">施工完成</text>
					<text class="txt2-2">{{orderInfo.workOverTime}}</text>
				</view>
			</view>
			<view class="add-info">
				<view class="title">
					<text class="txt">车辆照片(正面、侧面45°、侧后45°、背面)</text>
				</view>
				<view class="photo-content">
					<template v-for="(item,index) in carPhtoto" :key="index">
						<image class="photo" :src="item" mode="aspectFill" @click="previewImage(carPhtoto,index)">
						</image>
					</template>
				</view>
			</view>
			<view class="add-info">
				<view class="title">
					<text class="txt">服务项目-施工师傅</text>
				</view>
				<view class="chosenContent" style="background-color:  #ededf4; border: none;"
					v-for="(item,index) in orderService" :key="item.serviceItemId">
					<view class="top">
						<view class="serv">
							<text class="service">{{item.name}}</text>
							<text v-if="item.productSku" class="product">{{item.productSku.productName}}</text>
						</view>
						<text style="color: #c6c6c6;">{{item.employeeName}}</text>
					</view>
				</view>
			</view>

			<view class="btn" @click="mark_onclick">
				检查并评分
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onUnload,
	} from "@dcloudio/uni-app";
	import {
		api_get_order_easy_info,
		api_saleOrder_getInfo,
		api_saleOrder_update,
		api_saleOrder_updateBuildStatus,
		api_serviceEmployee_add
	} from "../../../../apis/apis.js"
	import {
		useMainStore
	} from '@/utils/store.js';

	const store = ref(useMainStore());
	const carInfo = ref({}); //订单简易信息
	const orderInfo = ref({}); //订单其他信息
	const orderService = ref([]); //订单选择的服务
	const carPhtoto = ref([]); //订单车辆图片
	const swipeShow = ref(false);

	//点击预览图片
	const previewImage = (carPhtoto, index) => {
		uni.previewImage({
			current: index,
			urls: carPhtoto
		});
	};


	//去评分
	const mark_onclick = () => {
		uni.navigateTo({
			url: "/pages/manager/order-list/order-achieve/grade/grade"
		});
	}


	onShow(async () => {
		let param = {
			saleId: store.value.orderId
		};
		//查询订单简易信息
		try {
			let res1 = await api_get_order_easy_info(param);
			carInfo.value = res1.data;
		} catch (e) {
			uni.showToast({
				title: e.msg,
				icon: "none"
			});
		}
		//查询订单其他信息
		try {
			let res2 = await api_saleOrder_getInfo(param);
			orderInfo.value = res2.data; //订单其他信息
			orderService.value = res2.data.orderService.serviceItemList; //订单的服务项目列表
			carPhtoto.value = JSON.parse(res2.data.carImage); //订单的汽车图片
		} catch (e) {
			uni.showToast({
				title: e.msg,
				icon: "none"
			});
		}
	});

	onUnload(() => {
		console.log("页面卸载");
		store.value.clear_oderInfo();
		store.value.clear_selectedManager();
		store.value.clear_selectedWorker();
	});
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: calc(calc(env(safe-area-inset-bottom)) + 10rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ededf4;

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #ededf4;
			width: 750rpx;
			padding-top: 36rpx;
			padding-bottom: 50rpx;
			height: auto;

			.order-info {
				background-color: $main-background-color;
				width: 700rpx;
				height: auto;
				display: flex;
				flex-direction: column;
				align-items: left;
				gap: 10rpx;
				margin-top: 50rpx;

				.txt1 {
					font-family: Alibaba_PuHuiTi_Medium;
					font-weight: 500;
					font-size: 34rpx;
					color: $font-primary-color;
				}

				.txt2 {
					display: flex;
					align-items: center;

					.txt2-1 {
						width: 160rpx;
						font-family: Alibaba_PuHuiTi_Light;
						font-weight: 300;
						font-size: 34rpx;
						color: $font-primary-color;
						margin-right: 30rpx;
					}

					.txt2-2 {
						font-family: Alibaba_PuHuiTi_Light;
						font-weight: 300;
						font-size: 36rpx;
						color: $font-sub-color;
					}
				}
			}
		}

		.add-info {
			margin-top: 50rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				width: 700rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.txt {
					font-family: Alibaba_PuHuiTi_Medium;
					font-weight: 500;
					font-size: 34rpx;
					color: $font-primary-color;
				}

				.add {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.photo-content {
				width: 700rpx;
				display: flex;
				justify-content: space-between;

				.photo {
					width: 170rpx;
					height: 170rpx;
					margin-top: 32rpx;
				}
			}

			.chosenContent {
				width: 700rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: left;

				border-bottom: 1rpx solid $border-color;

				.top {
					padding-top: 20rpx;
					width: 100%;
					// display: flex;
					// justify-content: space-between;
					align-items: center;

					.serv {
						display: flex;
						align-items: center;

						.service {
							font-family: Alibaba_PuHuiTi_Light;
							font-weight: 300;
							font-size: 34rpx;
							color: $font-primary-color;
							margin-right: 10rpx;
						}

						.product {
							font-family: Alibaba_PuHuiTi_Light;
							font-weight: 300;
							font-size: 34rpx;
							color: $font-sub-color;
						}
					}
				}
			}

			.price1 {
				font-family: Alibaba_PuHuiTi_Thin;
				font-weight: 250;
				font-size: 34rpx;
				color: $font-sub-color;
				width: 84rpx;
				text-align: center;
			}

			.price2 {
				font-family: Alibaba_PuHuiTi_Thin;
				font-weight: 300;
				font-size: 34rpx;
				color: $font-9e-color;
			}

			.manager {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 18rpx 0 10rpx 0;

				image {
					width: 40rpx;
					border-radius: 100rpx;
					overflow: hidden;
					height: 100rpx;
				}

				.name {
					font-family: Alibaba_PuHuiTi_Light;
					font-weight: 300;
					font-size: 34rpx;
					color: $font-sub-color;
					margin-left: 14rpx;
				}
			}
		}

		.btn {
			width: 700rpx;
			height: 80rpx;
			border-radius: 10rpx;
			overflow: hidden;
			background-color: $primary-color;
			font-family: Alibaba_PuHuiTi_Regular;
			font-weight: 400;
			font-size: 38rpx;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 50rpx;
		}
	}
</style>